<!-- TODO: figure out if the <nav> should go inside of a <header> element. -->
<nav class="docs-navbar-header" aria-label="Top Toolbar">
  @if (skipLinkHidden) {
    <div class="docs-skip-link-wrapper" [class.cdk-visually-hidden]="skipLinkHidden">
      <a matButton="elevated" [href]="skipLinkHref" (focus)="skipLinkHidden = false" (blur)="skipLinkHidden = true" color="accent">
        Skip to main content
      </a>
    </div>
  }
  <a matButton="text" routerLink="/" aria-label="Angular Material">
    <app-logo matButtonIcon/>
    Material

    @if (isNextVersion) {
      pre-release ⚠️
    }
  </a>

  @for (key of sectionKeys; track key) {
    <a matButton="text" class="docs-navbar-hide-small"
       [routerLink]="key"
       routerLinkActive="docs-navbar-header-item-selected">{{sections[key].name}}</a>
  }
  <a matButton="text" class="docs-navbar-hide-small" routerLink="guides" routerLinkActive="docs-navbar-header-item-selected">Guides</a>
  <div class="docs-flex-spacer"></div>
  <version-picker/>
  <theme-picker/>
  <a matButton="text" class="docs-navbar-hide-small" href="https://github.com/angular/components"
     aria-label="GitHub Repository" target="_blank">
    <span matButtonIcon [ngTemplateOutlet]="githubIcon"></span>
    GitHub
  </a>
  <a matIconButton class="docs-navbar-show-small"
     href="https://github.com/angular/components" aria-label="GitHub Repository" target="_blank">
     <ng-container [ngTemplateOutlet]="githubIcon"/>
  </a>
</nav>
<nav class="docs-navbar docs-navbar-show-small" aria-label="Section Nav Bar">
  @for (key of sectionKeys; track key) {
    <a matButton="text" class="docs-navbar-link"
      [routerLink]="key">{{sections[key].name}}</a>
  }
  <a matButton="text" class="docs-navbar-link" routerLink="guides">Guides</a>
</nav>


<ng-template #githubIcon>
  <svg viewBox="0 0 20 20" class="docs-github-logo" aria-hidden="true">
    <path d="M10 0C4.477 0 0 4.477 0 10c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V19c0 .27.16.59.67.5C17.14 18.16 20 14.42 20 10A10 10 0 0 0 10 0z" fill="currentColor" fill-rule="evenodd"/>
  </svg>
</ng-template>
